<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    export default{
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            click: {
                type: Boolean,
                default: true
            },
            listenScroll: {
                type: Boolean,
                default: false
            },
            data: {
                type: Array,
                default: null
            },
            dataObj: {
                type: Object,
                default: null
            },
            pullup: {
                type: Boolean,
                default: false
            },
            beforeScroll: {
                type: Boolean,
                default: false
            },
            refreshDelay: {
                type: Number,
                default: 80
            },
            listenScroll: {
                type: Boolean,
                type: false
            }
        },
        mounted() {
            setTimeout(() => {
                this._initScroll();
            },20);
        },
        methods: {
            _initScroll() {
                if (!this.$refs.wrapper) {
                    return
                }
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    click: this.click
                })
                //是否监听滚动事件
                if(this.listenScroll) {
                    let me = this;
                    //监听则给其父组件派发滚动事件
                    this.scroll.on('scroll', (pos) => {
                        me.$emit('scroll', pos);
                    })
                }
                //是否下拉加载
                if(this.pullup) {
                    this.scroll.on('scrollEnd', () => {
                        if(this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                            this.$emit('scrollToEnd');
                        } 
                    })
                }
            },
            disable() {
                this.scroll && this.scroll.disable()
            },
            enable() {
                this.scroll && this.scroll.enable()
            },
            refresh() {
                this.scroll && this.scroll.refresh()
            },
            scrollTo() {
                this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
            },
            scrollToElement() {
                this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
            }
        },
        updated () {
            setTimeout(() => {
                this.refresh();
            }, this.refreshDelay)
        },
        watch: {
            //data值改变时重新计算页面高度
            data() {
                setTimeout(() => {
                    this.refresh();
                }, this.refreshDelay)
            },
            dataObj(newVal) {
                setTimeout(() => {
                    this.refresh();
                }, this.refreshDelay)
            }
        }
    }
</script>

<style lang="stylus">
    
</style>